<template>
  <div ref="dom" class="charts chart-word-cloud"></div>
</template>

<script>
import * as echarts from "echarts";
import tdTheme from "./theme.json";
// import { on, off } from '@/libs/tools'
// import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-liquidfill";
// echarts.registerTheme("tdTheme", tdTheme);
export default {
  name: "ChartWordCloud",
  props: {
    value: {
      type: Array,
    },
    title: {
      type: String,
    },
  },
  data() {
    return {
      dom: null,
    };
  },
  watch: {
    value: {
      deep: true,
      handler(val) {
        this.intChart();
      },
    },
    series: {
      deep: true,
      handler(val) {
        this.intChart();
      },
    },
  },
  methods: {
    resize() {
      this.dom.resize();
    },
    intChart() {
      this.$nextTick(() => {
        var option = {
          series: [
            // {
            //   type: "liquidFill",
            //   data: [0.6],
            // },
            // {
            //   type: "liquidFill",
            //   data: [0.6, 0.5, 0.4, 0.3],
            // },
            // {
            //   type: "liquidFill",
            //   data: [0.5, 0.4, 0.3],
            //   color: ["red", "#0f0", "rgb(0, 0, 255)"],
            //   itemStyle: {
            //     opacity: 0.6,
            //   },
            //   emphasis: {
            //     itemStyle: {
            //       opacity: 0.9,
            //     },
            //   },
            // },
            // {
            //   type: "liquidFill",
            //   waveAnimation: false,
            //   animationDuration: 0,
            //   animationDurationUpdate: 0,
            //   data: [0.6, 0.5, 0.4, 0.3],
            // },
            // {
            //   type: "liquidFill",
            //   data: [0.6, 0.5, 0.4, 0.3],
            //   shape: "diamond",
            // },
            // {
            //   type: "liquidFill",
            //   data: [0.6, 0.55, 0.4, 0.25],
            //   radius: "60%",
            //   outline: {
            //     show: false,
            //   },
            //   backgroundStyle: {
            //     borderColor: "#156ACF",
            //     borderWidth: 1,
            //     shadowColor: "rgba(0, 0, 0, 0.4)",
            //     shadowBlur: 20,
            //   },
            //   shape:
            //     "path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z",
            //   label: {
            //     position: ["38%", "40%"],
            //     formatter: function () {
            //       return "ECharts\nLiquid Fill";
            //     },
            //     fontSize: 40,
            //     color: "#D94854",
            //   },
            // },
            {
              type: "liquidFill",
              data: [0.5, 0.4, 0.3, 0.2],
              shape: "container",
              outline: {
                show: false,
              },
            },
          ],
        };
        this.dom = echarts.init(this.$refs.dom, "tdTheme");
        this.dom.setOption(option, true);
        // on(window, 'resize', this.resize)
      });
    },
    init() {
      // 基于准备好的dom，初始化echarts实例
      var option = {
        title: {
          text: "热词",
          x: "center",
        },
        tooltip: {},
        series: [
          {
            type: "wordCloud",
            // The shape of the "cloud" to draw. Can be any polar equation represented as a
            // callback function, or a keyword present. Available presents are circle (default),
            // cardioid (apple or heart shape curve, the most known polar equation), diamond (
            // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.
            shape: "circle", // triangle
            // A silhouette image which the white area will be excluded from drawing texts.
            // The shape option will continue to apply as the shape of the cloud to grow.
            // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
            // Default to be put in the center and has 75% x 80% size.
            left: "center",
            top: "center", // 位置相关设置
            width: "70%",
            height: "80%",
            right: null,
            bottom: null,
            // Text size range which the value in data will be mapped to.
            // Default to have minimum 12px and maximum 60px size.
            sizeRange: [12, 60], // 用来调整字的大小范围
            // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45
            rotationRange: [-90, 90], // 用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
            rotationStep: 45,
            // size of the grid in pixels for marking the availability of the canvas
            // the larger the grid size, the bigger the gap between words.
            gridSize: 8, // 用来调整词之间的距离
            // set to true to allow word being draw partly outside of the canvas.
            // Allow word bigger than the size of the canvas to be drawn
            drawOutOfBound: false,
            // If perform layout animation.
            // NOTE disable it will lead to UI blocking when there is lots of words.
            layoutAnimation: true,
            // Global text style
            // 随机生成字体颜色
            textStyle: {
              fontFamily: "sans-serif",
              fontWeight: "bold",
              // Color can be a callback function or a color string
              color: function () {
                // Random color
                return (
                  "rgb(" +
                  [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                  ].join(",") +
                  ")"
                );
              },
            },
            emphasis: {
              focus: "self",
              textStyle: {
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            // Data is an array. Each array item must have name and value property.
            data: this.value,
          },
        ],
      };
      this.dom = echarts.init(this.$refs.dom, "tdTheme");
      this.dom.setOption(option, true);
    },
  },
  mounted() {
    this.intChart();
    // this.init();
  },
};
</script>